<template>
  <div class="read-month">
    <div
      class="read-month-list"
      v-for="m in readMonthList"
      :key="m.id"
    >
      <div
        v-if="m.articles.length>0"
        class="month-header"
      >
        <LineComponent
          color="#999"
          margin="0 0 0 0"
          offsetY="7px"
        />
        <h3> {{m.month}}月 </h3>
        <LineComponent
          color="#999"
          margin="0 0px 0 0"
          offsetY="7px"
        />
      </div>
      <template v-if="$route.params.category==8">
        <div
          class="radio-list"
          v-for="a in m.articles"
          :key="a.id"
          @click="gotoArticleDetails(a.id,a.category)"
        >
          <div class="radio-pic">
            <div class="volume">
              <i></i>
              <span>{{a.volume}}</span>
            </div>
            <img :src="a.cover">
            <i class="icon-title"></i>
            <p class="txt">{{a.title}}</p>
            <span
              class="play-icon "
             
            ></span>
             <!-- :class="playStatus?'pause-icon':'play-icon'" -->
          </div>
          <div class="radio-content">
            <div class="author-pic">
              <div class="author-img">
                <img :src="a.author.web_url">
              </div>
              <span>{{a.author.user_name}}</span>
            </div>
            <div class="title">
              <p><span>{{a.like_count}}</span></p>
              <p></p>
            </div>
          </div>
        </div>
      </template>

      <div
        v-else
        class="article-list"
        v-for="a in m.articles"
        :key="a.id"
        @click="gotoArticleDetails(a.id,a.category)"
      >
        <div class="article-pic">
          <img :src="a.cover">
        </div>
        <div class="article-content">
          <p>{{a.title}}</p>
          <p>{{a.subtitle}}</p>
        </div>
      </div>

    </div>
    <wd-loading
      v-if="loading"
      class="loading"
      color="#000000"
    ></wd-loading>
    <wd-infinite-load
      ref="infinite"
      @loadmore="loadmore"
      :loading="refresh"
      v-if="readMonthList.length"
    ></wd-infinite-load>
  </div>
</template>

<script>
import LineComponent from "@/components/LineComponent";
export default {
  name: "ReadMonthList",
  props: {
    playStatus: Boolean,
  },
  data() {
    return {
      loading: true,
      refresh: false,
      readMonthList: [],
      currentMonth: "", // 记录当前月份
      currentDate: 0, //记录当前日期
      category: "", 
    };
  },
  computed: {
    currentMon() {
      return new Date().getMonth() + 1;
    },
  },
  watch: {
    // currentDate(n, o) {
    //   console.log("旧值" + o);
    //   // console.log("新值"+n);
    //   this.currentMonth = n;
    //   console.log("新值" + this.currentMonth);
    // },
  },

  mounted() {
    let y = new Date().getFullYear();
    let m = new Date().getMonth() + 1;
    this.currentMonth = y + "-" + m;
    let { category } = this.$route.params;
    this.category = category;
    this.getReadmonthArticleData(this.currentMonth);
  },

  methods: {
    //  获取月份文章列表数据
    getReadmonthArticleData(date) {
      this.refresh = true;
      let month = this.currentMon;
      if (date) {
        month = new Date(date).getMonth() + 1;
      }
      this.$axios
        .get(
          `https://apis.netstart.cn/one/find/bymonth/${this.category}/${date}`
        )
        .then(({ data }) => {
          this.readMonthList = [
            ...this.readMonthList,
            {
              id: new Date().getTime(),
              month: month,
              articles: data.data,
            },
          ];
          this.$nextTick(() => {
            this.currentMonth = date;
            this.loading = false;
            this.refresh = false;
          });
        })
        .catch(() => {
          this.$refs.infinite.loadEnd();
        });
    },
    // 下拉刷新
    loadmore() {
      let d = this.currentMonth ? new Date(this.currentMonth) : new Date();
      // 判断是否到了前一年
      d.setMonth(d.getMonth() - 1);
      let m = d.getMonth() + 1;
      m = m >= 10 ? m : "0" + m;
      let date = d.getFullYear() + "-" + m;
      this.getReadmonthArticleData(date);
    },
    // 跳转文章详情
    gotoArticleDetails(id, category) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
          category,
        },
      });
    },
  },
  components: {
    LineComponent,
  },
};
</script>

<style lang="scss" scoped>
.read-month {
  position: fixed;
  top: 42px;
  left: 0;
  bottom: 0;
  padding-bottom: 50px;
  width: 100vw;
  background-color: #fff;
  overflow: auto;

  .month-header {
    display: flex;
    justify-content: center;
    margin: 0 10px;
    margin-top: 20px;
    h3 {
      margin: 0 10px;
      color: #bbb;
    }
  }
  .article-list {
    display: flex;
    align-items: center;
    margin: 20px 10px;
    .article-pic {
      margin-right: 10px;
      width: 50px;
      height: 50px;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .article-content {
      p {
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:nth-child(1) {
          font-size: 14px;
        }
        &:nth-child(2) {
          margin-top: 10px;
          font-size: 12px;
          color: rgb(145, 143, 143);
        }
      }
    }
  }
  .radio-list {
    .radio-content {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .radio-pic {
      position: relative;
      margin: 20px 10px;
      border-radius: 10px;
      overflow: hidden;
      .volume {
        position: absolute;
        top: 20px;
        left: 20px;
        color: #ccc;
        font-size: 12px;
        i {
          margin-right: 10px;
          display: inline-block;
          width: 46px;
          height: 11px;
          background-image: url(@/assets/img/article/one_radio_icon.png);
          background-repeat: no-repeat;
          background-size: cover;
          z-index: 1;
        }
        span {
          display: inline-block;
        }
      }
      .txt {
        width: 300px;
        position: absolute;
        left: 20px;
        bottom: 20px;
        letter-spacing: 3px;
        color: #ccc;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .play-icon {
        display: block;
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 32px;
        height: 32px;
        background-image: url(@/assets/img/play/feeds_radio_play.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
      .pause-icon {
        display: block;
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 32px;
        height: 32px;
        background-image: url(@/assets/img/play/feeds_radio_pause.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
      img {
        display: block;
        width: 100%;
      }
      &::before {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
    .author-pic {
      position: relative;
      flex: 1;
      span {
        position: absolute;
        top: calc(50% - 6px);
        left: 48px;
        font-size: 12px;
        color: rgb(172, 168, 168);
      }
    }
    .author-img {
      margin: 0 15px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .title {
      flex: 1;
      // padding: 0 20px;
      margin-left: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        width: 26px;
        height: 23px;
        background-repeat: no-repeat;
        background-size: cover;
        &:nth-child(1) {
          position: relative;
          margin-right: 30px;

          background-image: url(@/assets/img/article/discover_laud_unselected.png);
          span {
            position: absolute;
            top: calc(50% - 6px);
            left: 30px;
            font-size: 12px;
            color: rgb(158, 152, 152);
          }
        }
        &:nth-child(2) {
          margin-right: 15px;
          background-image: url(@/assets/img/article/feeds_share.png);
        }
      }
    }
  }
  .loading {
    margin: 20px auto;
  }
}
</style>